<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>同时使用过度和动画</title>
  <link rel="stylesheet" href="../../static/animate.min.css">
  <script src="../../static/vue.js"></script>
  <style>
    /*@keyframes bounce-in {
      0% {
        transform: scale(0);
      }
      50% {
        transform: scale(1.5);
      }
      100% {
        transform: scale(1);
      }
    }

    .active {
      transform-origin: left center;
      animation: bounce-in 1s;
    }

    .leave {
      transform-origin: left center;
      animation: bounce-in 1s;
    }*/

    .fade-enter,
    .fade-leave-to {
      opacity: 0;
    }

    .fade-enter-active,
    .fade-leave-active {
      transition: opacity 2s;
    }
  </style>

</head>
<body>
<div id="root">
  <transition
    type="transition"
    name="fade"
    appear
    enter-active-class="animated swing fade-enter-active"
    leave-active-class="animated shake fade-leave-active"
    appear-active-class="animated swing"
  >
    <!--<div v-if="show"> hellw world</div>-->
    <div v-show="show"> hellw world</div>
  </transition>

  <button @click="handleClick">按钮</button>
</div>
<script>
  var vm = new Vue({
    el: '#root',
    data: {
      show: true
    },
    methods: {
      handleClick: function () {
        this.show = !this.show
      }
    }
  })

</script>
</body>
</html>
